<template>
	<div class="hello">
		<vheader text='注册'></vheader>
		<div class="logo">
			<img :src="headimg" alt="" />
			<em class="drop" @click='showimg'></em>
			<div  v-if='showhead' class="headlist">
				<headimg @clickimg='changehead'></headimg>
			</div>
		</div>
		<div class="form">
			<div class="item">
				<em class="username"></em>
				<input type="text" v-model="uname" placeholder="账号" />
			</div>
			<p class='tips'>账号须以字母开头,由数字，字母或下划线组成</p>
			<div class="item">
				<em class="pwd"></em>
				<input type="text" v-model="pwd" placeholder="密码" />
			</div>
			<a class="login" @click="login" href="javascript:;">注册</a>
		</div>
	</div>
</template>

<script>
	import headimg from '@/components/headlist'
	export default {
		name: 'HelloWorld',
		data() {
			return {
				uname: '',
				pwd: '',
				headimg:'/src/assets/img/head1.jpg',
				showhead:false
			}
		},
		components:{
			headimg
		},
		create() {

		},
		methods: {
			login() {
				this.$store.commit('change', {
					key: 'uname',
					value: this.uname
				});
				this.$store.commit('change', {
					key: 'pwd',
					value: this.pwd
				});
				this.yanzheng();//验证格式
			},
			changehead(url){
				console.log(url);
				this.headimg=url;
				this.showhead=false;
			},
			yanzheng() {
				if(this.uname === '' || this.pwd === '') {
					this.$layer.alert('请填写账号或密码！');
					return;
				}
				let reg = /^[a-zA-Z]+[\d\w_]+$/
				if(!this.uname.match(reg)) {
					this.$layer.msg('用户名格式不正确');
					return;
				}
				if(this.pwd.length<6){
					this.$layer.msg('密码长度必须大于6位');
					return;
				}
				this.findsame();
			},
			showimg(){
				this.showhead=true;
			},
			insert() {
				this.$axios.post(
					'/api/login/createAccount', {
						account: this.uname,
						password: this.pwd,
						headimg:this.headimg
					}
				).then((dt) => {
					console.log(dt);
					if(dt.data.ok){
						this.$layer.msg('注册成功,正在跳转至登录页面');
						setTimeout(()=>{
							this.$router.push('/');
						},2000)
					}

				})
			},
			findsame() {
				//查询是否名字已经被占用
				this.$axios.post('/api/login/getAccount', {
					account: this.uname
				}).then((data) => {
					console.log(data.data);
					//箭头函数内this指向不变
					if(!data.data.length) {
						//如果不存在名字，则添加
						this.insert();
					}else{
						this.$layer.alert('该用户名已被占用');
					}
				})
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style rel="stylesheet/scss" scoped lang='scss'>
	@import "../assets/style/_mixin";
	.hello {
		width: 100%;
		height: 100%;
		/*background: linear-gradient(to bottom,#b4b4f3,#5757de);*/
		background: url('../assets/img/login_bg.jpg') no-repeat center;
		padding-top: 200px/$ppr;
		box-sizing: border-box;
		.logo {
			width:180px/$ppr;
			height:180px/$ppr;
			margin:0 auto 100px/$ppr;
			position:relative;
			.headlist{
				width:500px/$ppr;
				height: 300px/$ppr;
				position: absolute;
				top:100px/$ppr;
				left:50%;
				transform: translateX(-50%);
				z-index: 2;
			}
			img{
				width:100%;
				height: 100%;
				border-radius:50%;
			}
			em.drop{
				display: block;
				width:30px/$ppr;
				height: 20px/$ppr;
				position: absolute;
				bottom: 0;
				right:0;
				background: url(../assets/img/drop.png) no-repeat center;
				background-size:100% 100%;
			}
		}
		.form {
			width: 70%;
			margin: 30px/$ppr auto;
			.item {
				width: 100%;
				height: 70px/$ppr;
				line-height: 70px/$ppr;
				background: transparent;
				margin-bottom: 30px/$ppr;
				position: relation;
				em {
					position: absolute;
				}
				input {
					background: transparent;
					width: 100%;
					height: 100%;
					line-height: 100%;
					padding-left: 20px/$ppr;
					box-sizing: border-box;
					border: 1px solid #6897bd;
					border-radius: 40px/$ppr;
					outline: none;
					font-size: 28px/$ppr;
					color: #fff;
				}
				input::-webkit-input-placeholder {
					font-size: 28px/$ppr;
					color: #F1F1F1;
				}
			}
			.tips {
				font-size: 24px/$ppr;
				color: #ecb8d7;
				margin-top:-20px/$ppr;
				margin-bottom: 20px/$ppr;
				padding-left: 5px/$ppr;
				box-sizing: border-box;
			}
			.login {
				display: block;
				width: 100%;
				height: 60px/$ppr;
				line-height: 60px/$ppr;
				text-align: center;
				font-size: 28px/$ppr;
				background: #c342bf;
				margin: 40px/$ppr auto 0;
				color: #fff;
				border-radius: 40px/$ppr;
				box-shadow: 0 0 1px #fff;
			}
		}
	}
</style>